<style>
    th{background-color:#f1f1f1}
    .nav{margin-bottom: 2px}
    #add{float:right}
    button{margin-top:10px}
    #save{margin-right:5px}
</style>
<ul class="breadcrumb">当前位置：
    <a href="#">首页</a> <span class="divider">/</span>
    <a href="javascript:history.go(-1)">前台</a> <span class="divider">/</span>
    {$data.menuName}内容编辑
</ul>
<input type="hidden" value="{$data.menuId}">
<div class="title_right"><strong>{$data.menuName}内容编辑</strong></div>
<div style="margin:auto">
    <div id="editor">

    </div>
    <div style="position:relative;margin: 0 auto;width:120px">
    <button class="btn btn-primary" id="save">保存</button>
    <button class="btn btn-default" onclick="editor.txt.clear()">清空</button>
    </div>
    <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
    <script type="text/javascript" src="__STATIC__/js/wangEditor.min.js"></script>
    <script type="text/javascript">
        var apiUrl = '/api/adminapi/';
        var menuId = $('input').val();
        var E = window.wangEditor;
        var editor = new E('#editor');
        // 通过 url 参数配置 debug 模式。url 中带有 wangeditor_debug_mode=1 才会开启 debug 模式
        editor.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0;
        editor.customConfig.uploadImgServer = '/api/adminapi/upload';
        editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024;
        editor.customConfig.uploadFileName = 'file';
        editor.customConfig.uploadImgMaxLength = 1;
        editor.customConfig.zIndex = 0;

        editor.customConfig.uploadImgHooks = {
            before: function (xhr, editor, files) {
                // 图片上传之前触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

                // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
                // return {
                //     prevent: true,
                //     msg: '放弃上传'
                // }
            },
            success: function (xhr, editor, result) {
                // 图片上传并返回结果，图片插入成功之后触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            },
            fail: function (xhr, editor, result) {
                // 图片上传并返回结果，但图片插入错误时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            },
            error: function (xhr, editor) {
                // 图片上传出错时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            },
            timeout: function (xhr, editor) {
                // 图片上传超时时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            },

            // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
            // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
            customInsert: function (insertImg, result, editor) {
                // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

                // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
               if(result.status){
                   insertImg(result.url);
               }
                // result 必须是一个 JSON 格式字符串！！！否则报错
            }
        };
        editor.create();
        $('#save').click(function () {
            var htmlContent = editor.txt.html();
            $.post(apiUrl+'menuhtml',{htmlContent:htmlContent,menuId:menuId},function (e) {
                 if(e.status){
                     alert('保存成功');
                 }else{
                     alert('保存失败');
                 }
            });
        });

        $.post(apiUrl+'getHtml',{menuId:menuId},function (e) {
            editor.txt.html(e.htmlContent);
        })
    </script>
</div>

